<template>


<el-menu default-active="1-4-1" class="el-menu-vertical-demo"
   background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
   @open="handleOpen" @close="handleClose" :collapse="isCollapse">
     
    <h3>{{ isCollapse?'后台':'后台管理系统' }}</h3>
    <el-menu-item @click="changePath(item)" v-for=" item in noChildren " :key="item.name" :index="item.name">
      <i :class="`el-icon-${item.icon}`"></i>
      <span slot="title">{{ item.name }}</span>
    </el-menu-item>
   
    <el-submenu v-for=" item in haveChildren" :key="item.id" :index="String(item.id)">

      <template slot="title">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.name }}</span>
      </template>
     
       
        <el-menu-item  @click="changePath(subitem)" v-for="subitem in item.children"  :key="subitem.id" index="subitem.id">
            <i :class="`el-icon-${subitem.icon}`"></i> {{ subitem.name }}
        </el-menu-item>
        
      
    </el-submenu>
   
    
  </el-menu>
</template>
  <style lang="less" scoped>
  //  .el-aside{
  //   height: 500px;
  //   .el-menu-vertical-demo .el-menu--collapse .el-menu{
  //        height: 100%;
  //   }
  // }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
      height: 100vh;
    }
    h3{
        font-size: 16px;
        line-height: 40px;
        text-align: center;
    }
   .el-menu{
    border-right: none;
   }
    
  </style>
  
  <script>
 import reqMenu from '@/api/commen/menu'
    export default {
   async mounted(){
          const userid = this.$store.state.userinfo.user.id;
         // console.log(userid);
         const res = await reqMenu.getMenuByUid(userid)
       //  console.log(res);


            //先清除菜单内容
          this.parentMenu.splice(0,this.parentMenu.length)
          this.childrenMenu.splice(0,this.childrenMenu.length)

            this.$nextTick(()=>{
               const list = res.data;
      
          this.parentMenu =    list.filter(item => item.parentId==null)
          this.childrenMenu = list.filter(item=> item.parentId!=null)
           
          this.parentMenu.forEach(item=>{
                  item['children'] = []
          })
            
          for(let i=0;i<this.parentMenu.length;i++)
          {
             for(let j=0;j<this.childrenMenu.length;j++)
             {
                if(this.childrenMenu[j].parentId == this.parentMenu[i].id)
                {
                   this.parentMenu[i].children.push(this.childrenMenu[j])
                }
             }
          }


          this.parentMenu.forEach(item=>{
            if(item.children.length==0){
                delete item.children
            }
          })
            //存入store
          this.$store.state.parentMenu = this.parentMenu;
          this.$store.state.childrenMenu = this.childrenMenu;
       

            })
   




      },

      data() {
        return {
            //控制菜单是否折叠
         
         
          // menuData:[
          //  {
          //   path:'/',
          //   id:"home",
          //   name: "首页",
          //   icon:"house",
          //   url: "views/Index"
          //  },
          //  {
          //   id: "goods",
          //   name: "文章管理",
          //   icon: "shopping-cart-full",
          //   children:[
          //       {
          //           path:"/articles",
          //           id: "articles",
          //           name: "内容管理",
          //           icon: "shopping-cart-2",
          //           url: "'views/Group'"
          //       },
          //       {
          //           path: "/comments",
          //           id: "comments",
          //           name: "评论管理",
          //           icon: "shopping-bag-2",
          //           url: "'views/GoodOne'"
          //       },
          //       {
          //         path: "/replys",
          //         id: "replys",
          //         name: "回复管理",
          //         icon: "shopping-bag-2",
          //         url: "'views/Reply'"
          //       }
          //   ]
          //  },
          //  {
          //   id: "user",
          //   name: "用户管理",
          //   icon: "user",
          //   children:[
          //       {
          //           path: "/user",
          //           id: "user",
          //           name: "用户详情",
          //           icon: "s-custom",
          //           url: "views/UserOne"
          //       },
          //       {
          //           path: "/auther",
          //           id: "auther",
          //           name: "权限管理",
          //           icon: "setting",
          //           url: "'views/Auther'"
          //       }
          //   ]
          //  }
          // ],
          parentMenu:[],

          childrenMenu:[]

        };
      },
      methods: {
        handleOpen(key, keyPath) {
         // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
         // console.log(key, keyPath);
        },
        //路由跳转
        changePath(item){
            //当前路径和路由不一致的时候才进行跳转
             if(this.$route.path !== item.path && !(this.$route.path==='/home' && this.path === '/home'))

            this.$router.push(item.path)
            /**跳转时把面包屑改变
             * 传入俩参数：breadMenTo是方法,item是当前路由数据
          **/
            this.$store.commit('breadMenuTo',item)
        }
     
      } ,

      computed:{
        //没有子菜单的
        noChildren(){
            return this.$store.state.parentMenu.filter(item => !item.children)
          
        },
        //有子菜单的
        haveChildren(){
             return this.$store.state.parentMenu.filter(item => item.children)
          
        },
        //控制菜单折叠
        isCollapse(){
          return this.$store.state.tab.isCollapse
        }
      }
    }
  </script>
